<template>
  <div class="batch-withhold-wrapper">
    <div class="batch-withhold-inner">
      <h3>支付渠道扣款统计</h3>
      <div class="search-con">
        <Select class="search-col" placeholder="还款方式" v-model="repayWayChannel">
          <Option value="all">全部还款途径</Option>
          <Option value="yeepay">易宝</Option>
          <Option value="chanpay">畅捷</Option>
          <Option value="wxpay">官方微信支付</Option>
          <Option value="alipay">官方支付宝支付</Option>
          <Option value="lakala">拉卡拉</Option>
          <Option value="joinpay">汇聚</Option>
          <!-- <Option value="huipay">汇潮</Option> -->
        </Select>
        <DatePicker
          class="search-col"
          type="daterange"
          :value="pickerValue1"
          placeholder="请选择日期"
          format="yyyy-MM-dd"
          @on-change="handlePicker1"></DatePicker>
      </div>
      <Table
        border
        :columns="columns1"
        :data="list1"
        :loading="loading1"></Table>

      <Divider />

      <h3>批量代扣批次列表</h3>
      <div class="search-con">
        <Input class="search-col" v-model="batchNum" placeholder="批次号" />
        <DatePicker
          class="search-col"
          type="daterange"
          :value="pickerValue2"
          placeholder="请选择日期"
          format="yyyy-MM-dd"
          @on-change="handlePicker2"></DatePicker>
      </div>
      <Table
        border
        :columns="columns2"
        :data="list2"
        :loading="loading2"></Table>

        <Page
					:total="total2"
					:current.sync="page"
					:page-size-opts="[10, 20, 40, 80, 100]"
					show-total
					show-elevator
					show-sizer
					@on-change="pageChange"
					@on-page-size-change="handleSizeChange"
					style="margin: 15px 0;text-align: right;"></Page>
    </div>

    <batch-detail
      v-model="detailVisible"
      :num="detailNum"></batch-detail>
  </div>
</template>

<script>
  const COMPONENT_NAME = 'patch-withhold';
  import NP from 'number-precision';
  import { repayChannel } from '@/static/constant';
  import { dateFormat, thousandsFormat } from '@/static/tools';
  import orderPoptip from './components/order-poptip';
  import batchDetail from './components/batch-detail';
  
  export default {
    name: COMPONENT_NAME,
    data () {
      return {
        columns1: [
          { title: '日期', key: 'date', align: 'center' },
          { title: '扣款笔数', key: 'totalCount', align: 'center' },
          {
            title: '成功笔数', key: 'successCount', align: 'center' },
          { 
            title: '成功率',
            align: 'center',
            render: (h, params) => {
              const { successRate } = params.row;
              return h('span', `${NP.times(successRate, 100)}%`);
            }
          },
          { title: '可扣数量', key: 'restCount', align: 'center' },
          { 
            title: '成功率阈值', key: 'successRateThreshold', align: 'center' }
        ],
        columns2: [
          { title: '批次号', key: 'batchNum', align: 'center' },
          { title: '扣款时间', key: 'ctime', align: 'center' },
          { 
            title: '扣款类型',
            align: 'center',
            render: (h, params) => {
              const { type } = params.row;
              return h('span', type === 'payoff' ? '结清' : type === 'part' ? '部分还款' : '展期');
            }
          },
          { 
            title: '操作人员',
            align: 'center',
            render: (h, params) => {
              const { managerName } = params.row;
              return h('span', managerName == '' ? '自动' : managerName);
            }
          },
          { 
            title: '当前状态',
            align: 'center',
            render: (h, params) => {
              const { status } = params.row;
              return h('span', status === 0 ? '进行中' : '已完成');
            }
          },
          { title: '订单量', key: 'orderCount', align: 'center' },
          { 
            title: '成功量',
            align: 'center',
            render: (h, params) => {
              const { successCount, successRemark } = params.row;
              let arr = [];
              if (successRemark != '') {
                let obj = JSON.parse(successRemark);
                arr = Object.keys(obj).map(item => {
                  return { key: repayChannel[item], value: obj[item] }
                });
              }

              return h('div', [
                h(orderPoptip, {
                  props: {
										text: successCount,
                    content: arr
                  }
                })
              ])
            }
          },
          { 
            title: '失败量',
            align: 'center',
            render: (h, params) => {
              const { failCount, failRemark } = params.row;
              let arr = [];
              if (failRemark != '') {
                let obj = JSON.parse(failRemark);
                arr = Object.keys(obj).map(item => {
                  let val = `${NP.times(obj[item], 100)}%`;
                  return { key: item, value: val }
                });
              }
              
              return h('div', [
                h(orderPoptip, {
                  props: {
										text: failCount,
                    content: arr
                  }
                })
              ])
            }
          },
          { 
            title: '成功率',
            key: 'successRate',
            align: 'center',
            render: (h, params) => {
              const { successRate } = params.row;
              return h('span', `${NP.times(successRate, 100)}%`);
            }
          },
          { title: '扣款总金额', key: 'successMoney', align: 'center' },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const { batchNum } = params.row;
              
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleDetail(batchNum);
                    }
                  }
                }, '查看详情')
              ]);
            }
          }
        ],
        list1: [],
        loading1: true,
        repayWayChannel: 'all',
        startDate1: '',
        endDate1: '',
        pickerValue1: [],
        batchNum: '',
        list2: [],
        loading2: true,
        total2: 0,
        startDate2: '',
        endDate2: '',
        pickerValue2: [],
        page: 1,
        pageSize: 10,
        detailVisible: false,
        detailNum: ''
      }
    },
    created() {
      let today = dateFormat(Date.now(), 'yy-mm-dd');
      this.startDate1 = today;
      this.endDate1 = today;
      this.pickerValue1 = [today, today];
      this.getChannelDeductStat();
      this.getBatchWithholdLog();
    },
    methods: {
      // 查询支付渠道扣款统计
      getChannelDeductStat() {
        this.loading = true;
        this.$http.get(`/helsinki/admin/batchWithhold/channelDeductStat?startDate=${this.startDate1}&endDate=${this.endDate1}&repayWayChannel=${this.repayWayChannel}`)
        .then(({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.list1 = data;
          }
          this.loading1 = false;
        }, error => {});
      },
      // 批量代扣批次列表
      getBatchWithholdLog() {
        this.$http.get(`/helsinki/admin/batchWithhold/log?startDate=${this.startDate2}&endDate=${this.endDate2}&batchNum=${this.batchNum}`)
        .then(({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.list2 = data.list;
            this.total2 = data.size;
          }
          this.loading2 = false;
        }, error => {});
      },
      // 分页切换
      pageChange(val) {
				this.page = val;
				this.getBatchWithholdLog();
			},
			// 每页显示数量
			handleSizeChange(val) {
				this.pageSize = val;
				this.getBatchWithholdLog();
      },
      // 支付渠道统计 日期选择器
      handlePicker1(val) {
        this.selectValue1 = val;
        this.startDate1 = val[0];
        this.endDate1 = val[1];
        this.getChannelDeductStat();
      },
      // 批量代扣列表 日期选择器
      handlePicker2(val) {
        this.selectValue2 = val;
        this.startDate2 = val[0];
        this.endDate2 = val[1];
        this.page = 1;
        this.getBatchWithholdLog();
      },
      // 点击批量代扣列表“详情”按钮
      handleDetail(num) {
        this.detailNum = num;
        this.detailVisible = true;
      }
    },
    watch: {
      repayWayChannel() {
        this.getChannelDeductStat();
      },
      batchNum() {
        this.page = 1;
        this.getBatchWithholdLog();
      }
    },
    components: {
      orderPoptip,
      batchDetail
    }
  }
</script>

<style lang="scss" scoped>
  .batch-withhold-wrapper {
    padding: 15px;

    .search-con {
      font-size: 0;
      .search-col {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 200px;
        font-size: 14px;
        vertical-align: middle;
      }
    }
  }

  .batch-withhold-inner {
    margin-top: 10px;
    h3 {
      margin-bottom: 20px;
    }
  }
</style>
